<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>文章分类管理</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <style>
        /* 全局样式 */
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f9f9f9;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1000px;
            margin: 60px auto;
            padding: 0 15px;
        }

        /* 导航栏样式 */
        .navbar {
            background-color: #ffffff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .navbar-brand {
            font-weight: 600;
            color: #3a7d44;
        }

        /* 标题样式 */
        h1 {
            font-size: 2rem;
            font-weight: bold;
            color: #3a7d44;
            margin-bottom: 25px;
            text-align: center;
        }

        /* 按钮样式 */
        .btn {
            border-radius: 20px;
            transition: all 0.3s ease;
            font-weight: 500;
            padding: 8px 20px;
        }

        .btn-green {
            background-color: #4caf50;
            color: white;
            border: none;
        }

        .btn-green:hover {
            background-color: #388e3c;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .btn-red {
            background-color: #f44336;
            color: white;
            border: none;
        }

        .btn-red:hover {
            background-color: #d32f2f;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* 表格样式 */
        .table-responsive {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        table {
            width: 100%;
            margin-bottom: 0;
        }

        thead {
            background-color: #f5f5f5;
        }

        th, td {
            padding: 15px;
            vertical-align: middle;
            text-align: center;
        }

        tbody tr {
            border-bottom: 1px solid #f0f0f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        tbody tr:hover {
            background-color: #f9f9f9;
            transform: translateY(-2px);
        }

        /* 操作列样式 */
        .actions {
            display: flex;
            justify-content: center;
            gap: 10px;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        .page-item.active .page-link {
            background-color: #4caf50;
            border-color: #4caf50;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                margin: 30px 15px;
            }

            h1 {
                font-size: 1.8rem;
            }
        }
    </style>
</head>
<body>

<div class="container">

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white rounded shadow-sm mb-4">
        <div class="container-fluid">
            <a class="navbar-brand fs-4 fw-bold" href="#">博客管理系统</a>
            <div class="ms-auto d-flex gap-2">
            </div>
        </div>
    </nav>

    <!-- 页面标题 -->
    <h1>文章分类管理</h1>

    <!-- 新增按钮 -->
    <div class="mb-4">
        <a href="/category/add" class="btn btn-green">新增分类</a>
        <a th:href="@{/admin/index}" class="btn btn-green">返回首页</a>
    </div>

    <!-- 分类表格 -->
    <div class="table-responsive">
        <table class="table align-middle">
            <thead>
            <tr>
                <th>ID</th>
                <th>分类名称</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="category : ${list}">
                <td th:text="${category.id}">1</td>
                <td th:text="${category.name}">技术</td>
                <td class="actions">
                    <a th:href="@{/category/delete/{id}(id=${category.id})}" class="btn btn-red btn-sm">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<!-- Bootstrap JS -->
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>

</body>
</html>